import React, { useEffect, useState } from 'react';
import { Breadcrumb } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import { menuList } from '../config/menuList'

type Props = {}

const ComBreadcrumb = (props: Props) => {
    const location = useLocation()
    //面包屑
    const [breadcrumbList, setBreadcrumbList] = useState<{ title: string }[]>([])
    //跳转路由的转换
    useEffect(() => {
        console.log('location', location.pathname)
        const pathArr = location.pathname.split('/').slice(1)
        let count = 0
        let arr: any = []
        const checkLise = (list: any) => {
            list.forEach((p: any) => {
                if (pathArr[count] == p.key) {
                    if (p.children) {
                        count++
                        checkLise(p.children)
                        arr.unshift(p.label)
                    } else {
                        arr.unshift(p.label)
                    }
                }
            })
        }
        checkLise(menuList)
        const title = arr.map((item: any) => {
            return (
                {
                    title: item == '首页' ? <Link to="/home">首页</Link> : item,
                }
            )
        });
        setBreadcrumbList(title)
    }, [location.pathname])
    return (
        <div>
            <Breadcrumb items={breadcrumbList} style={{ marginBottom: '30px' }} />
        </div>
    )
}

export default ComBreadcrumb